// 获取分类列表
let getCateList = async () => {
    let res = await request("get", "http://demo26.crmeb.net/api/category");
    console.log(res.data)
    let html = "";
    res.data.forEach((item,index) => {
        let div;
        if(index===0){
             div = `<div class='active' onClick='goCate(${index},${item.id})'>${item.cate_name}</div>`
        }else{
           div = `<div onClick='goCate(${index},${item.id})'>${item.cate_name}</div>`
        }
        html += div;
    })
    $("nav").html(html)
    // 获取第一个分类对应的id
    let id = res.data[0].id;
    console.log(id)
    // 获取第一个分类对应的商品列表
    getGoodsList(id);
}
getCateList();
// 数据为空时暂无数据
render([]);
//  获取商品分类对应的商品列表
async function getGoodsList(id) {
    let res = await request("get", `http://demo26.crmeb.net/api/pc/get_products?page=1&limit=10&cid=${id}&sid=0&priceOrder=&news=0`)
    console.log(res.data.list)
    // 渲染商品列表
    render(res.data.list)
}
// 定义商品列表渲染函数
function render(list) {
    // 若没有数据
    if(list.length===0){
        let html = `<div class='nodata'>
        <img src='http://demo26.crmeb.net/home/img/noGoods.348185d.png' alt='' />
         <p>暂无数据</p>
        </div>`
        $("main").html(html)
        return
    }
    let html = "";
    list.forEach(item => {
        let div = ` 
        <div class="goods">
        <div class="goods_img">
            <img src="${item.image}" alt="">
        </div>
        <div class="goodsPrice">
            <span class="price">¥${item.price}</span> <span class="oltprice">¥${item.ot_price}</span>
        </div>
        <div class="goodsName">
           ${item.store_name}
        </div>
        <div class="goods_msg">
            <div>
                ${item.sales}人付款
            </div>
            <div>
                ${item.star}分
            </div>
        </div>
        </div>
        `
        html += div;
    })
    $("main").html(html);
}

function goCate(index,id){
    // 根据索引找到当前点击的div dom;
   let div = $("nav div")[index]
   $(div).addClass("active").siblings().removeClass("active");
//    暂无数据
   render([]);
//    获取当前点击的分类商品列表
   getGoodsList(id);
}